<template>
  <div class="container mx-auto px-4 py-8">
    <!-- 顶部导航 -->
    <nav class="mb-8">
      <div class="flex space-x-4 overflow-x-auto pb-2">
        <button 
          v-for="category in categories" 
          :key="category" 
          @click="setCurrentCategory(category)"
          :class="[currentCategory === category ? 'bg-blue-500 text-white' : 'bg-gray-200 hover:bg-gray-300', 'px-4 py-2 rounded-full text-sm font-medium']"
        >
          {{ category }}
        </button>
      </div>
    </nav>

    <!-- 新闻列表 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <NewsCard 
        v-for="item in news" 
        :key="item.id" 
        :news-item="item" 
        @toggle-favorite="toggleFavorite"
      />
    </div>

    <!-- 加载更多 -->
    <div class="mt-8 text-center">
      <button 
        @click="loadMoreNews" 
        class="px-6 py-3 bg-blue-500 text-white rounded-full hover:bg-blue-600"
      >
        加载更多
      </button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useNewsStore } from '../store'
import { useFavoritesStore } from '../store'
import NewsCard from '../components/NewsCard.vue'

const newsStore = useNewsStore()
const favoritesStore = useFavoritesStore()
const { news, categories, currentCategory, setNews, setCurrentCategory } = newsStore
const { toggleFavorite } = favoritesStore

// 模拟新闻数据
const fetchNews = () => {
  // 实际项目中这里会替换为API调用
  const mockNews = Array(6).fill().map((_, i) => ({
    id: Date.now() + i,
    title: `${currentCategory}新闻标题 ${i+1}`,
    summary: '这是一条新闻摘要，包含了新闻的主要内容和关键点，让读者快速了解新闻核心信息。',
    image: `https://picsum.photos/seed/${currentCategory}${i}/400/240`,
    date: new Date(Date.now() - i * 86400000).toLocaleDateString(),
    category: currentCategory
  }))
  setNews(mockNews)
}

const loadMoreNews = () => {
  const moreNews = Array(3).fill().map((_, i) => ({
    id: Date.now() + i + 1000,
    title: `${currentCategory}新闻标题 ${news.length + i + 1}`,
    summary: '这是一条加载更多的新闻摘要，展示无限滚动功能。',
    image: `https://picsum.photos/seed/${currentCategory}${news.length + i}/400/240`,
    date: new Date(Date.now() - (news.length + i) * 86400000).toLocaleDateString(),
    category: currentCategory
  }))
  news.push(...moreNews)
}

onMounted(() => {
  fetchNews()
})
</script>